<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-family: Helvetica, serif;
        }

        svg {
            width: 500px;
            height: 500px;
        }

        .top-label {
            font-size: 13px;
            font-style: italic;
            text-transform: uppercase;
            float: left;
        }

        .age-label {
            text-align: right;
            font-weight: bold;
            width: 90px;
            padding-right: 10px;
        }

        .clearfix {
            clear: both;
        }

        .bar {
            fill: darkslateblue;
        }

        .x.axis line {
            fill: none;
            stroke: #000;
        }

        .axis path {
            display: none;
        }

        .x.axis text {
            font-size: 13px;
        }

        .y.axis line {
            display: none;
        }
    </style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>
    var margin = {top: 30, right: 0, bottom: 0, left: 100},
        width = 500 - margin.left - margin.right,
        height = 450 - margin.top - margin.bottom;

    var x = d3.scale.linear()
        .range([0, width]);

    var y = d3.scale.ordinal()
        .rangeBands([0, height], 0.2, 0);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("top")
        .ticks(5, "%");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

    const body = d3.select("body");
    body.append("h2")
        .text("Age distribution of the world, 2010");

    body.append("div")
        .attr("class", "top-label age-label")
        .append("p")
        .text("age group");

    body.append("div")
        .attr("class", "top-label")
        .append("p")
        .text("portion of the population");

    body.append("div")
        .attr("class", "clearfix");

    var svg = body.append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.csv("popData2010.csv", function (error, data) {
        var popData = data;

        x.domain([0, d3.max(popData, function (element) {
            return element.value;
        })]);

        y.domain(popData.map(function (element) {
            return element.age;
        }));

        svg.selectAll("rect")
            .data(popData)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", 0)
            .attr("height", y.rangeBand())
            .attr("width", function (d) {
                return x(d.value);
            })
            .attr("y", function (d) {
                return y(d.age);
            });

        svg.append("g")
            .call(xAxis)
            .attr("class", "x axis");
        svg.append("g")
            .call(yAxis)
            .attr("class", "y axis");
    });
</script>
</body>
</html>